<template>
    <div>
        <el-dialog title="讲师评语" :close-on-click-modal="false" :visible.sync="visible" width="60%">
            <div style="display:flex;justify-content:space-between;align-item:center;margin-bottom:10px;">
                <!--        <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>-->
            </div>
            <el-table :data="dataList" row-key="id" border v-loading="dataListLoading" style="width: 100%;"
                      max-height="500">
                <el-table-column type="index" header-align="center" align="center" label="序号" width="50px"/>
                <el-table-column prop="realname" header-align="center" align="center" label="姓名"/>
                <el-table-column prop="gender" header-align="center" align="center" label="性别">
                    <template slot-scope="scope">{{scope.row.gender===2?'女':'男'}}</template>
                </el-table-column>
                <el-table-column prop="deptName" header-align="center" align="center" label="部门"/>
                <el-table-column prop="signUpdTime" header-align="center" align="center" label="报名时间">
                    <template slot-scope="scope">
                        {{scope.row.signUpdTime.slice(0,10)}}
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" header-align="center" align="center" label="电话"/>
                <el-table-column prop="mobile" header-align="center" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="parseInt(scope.row.commentStatus) === 0">未评价</el-tag>
                        <el-tag type="success" v-else>已评价</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        width="150"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="sysSeeHandle(scope.row.userId)">评价</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    :total="totalCount"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="margin-top: 10px"
            ></el-pagination>
        </el-dialog>

        <el-dialog width="50%" :visible.sync="sysSeeVisible" title="讲师评价" append-to-body>
            <div>
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item label="讲师评语:">
                        <el-input type="textarea" v-model="dataForm.evaluate"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="sysSeeVisible = false">取消</el-button>
                    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          key: '',
          trainId: '',
          userId: '',
          evaluate: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        sysSeeVisible: false,
        dataListLoading: false,
        addOrUpdateVisible: false,
        tabIndex: 0
      }
    },
    methods: {
      init (id) {
        this.visible = true
        this.dataForm.trainId = id
        this.getDataList()
      },
      // 获取已报名数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/trainentrystatistics'),
          method: 'post',
          data: {
            page: this.pageIndex,
            limit: this.pageSize,
            trainId: this.dataForm.trainId
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.dataList = res.data.list
            this.totalCount = res.data.totalCount
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      dataFormSubmit () {
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/evaluate'),
          method: 'post',
          data: {
            userId: this.dataForm.userId,
            evaluate: this.dataForm.evaluate,
            trainId: this.dataForm.trainId
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.sysSeeVisible = false
              }
            })
            this.getDataList()
          } else {
            this.$message.warning(res.msg)
          }
        })
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      sysSeeHandle (userId) {
        this.sysSeeVisible = true
        this.dataForm.userId = userId
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/getevaluate'),
          method: 'post',
          data: {
            userId: this.dataForm.userId,
            trainId: this.dataForm.trainId
          }
        }).then(res => {
          this.dataForm.evaluate = res.data
        })
      }

      // // 导出
      // handleDownload () {
      //   this.$http({
      //     url: this.$http.adornUrl(`/train/traincourse/getShouldSignUpUserList/${this.dataForm.trainId}`),
      //     method: 'post'
      //   }).then(res => {
      //     if (res.data) {
      //       import('@/vendor/Export2Excel').then(excel => {
      //         const tHeader = ['姓名', '性别', '部门', '岗位/工种', '电话', '   状态   ', '            备注            ']
      //         const filterVal = ['realname', 'gender', 'deptName', 'workTypes', 'mobile', 'signUpStatus']
      //         // const tHeader = ['姓名', '性别', '部门', '电话', '   状态   ', '            备注            ']
      //         // const filterVal = ['realname', 'gender', 'deptName', 'mobile', 'signUpStatus']
      //         const data = this.formatJson(filterVal, res.data)
      //         excel.export_json_to_excel({
      //           header: tHeader,
      //           data,
      //           filename: '报名表 ' + new Date().toLocaleDateString()
      //         })
      //       })
      //     }
      //   })
      // },
      // formatJson (filterVal, jsonData) {
      //   let data = ''
      //   data = jsonData.map(v => filterVal.map(j => {
      //     if (j === 'signUpStatus') {
      //       return v[j] === 0 ? '已报名' : '未报名'
      //     } else if (j === 'gender') {
      //       return v[j] === 2 ? '女' : '男'
      //     } else {
      //       return v[j]
      //     }
      //   }))
      //   return data
      // }
    }
  }
</script>

<style scoped>
    .under-line {
        border-bottom: 2px solid #409eff;
        color: #409eff;
    }

    .work-types-box {
        display: inline-block;
        background: rgba(0, 0, 0, .1);
        padding: 0 2px;
        margin: 2px;
        border-radius: 3px;
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
    }
</style>
